<template>
    <view class="time-slot-wrapper">
        <view class="all" :style="{backgroundColor: canColor}">
            <view class="leftLine" :style="leftTimeStyle"></view>
            <view class="line" v-for="(item, index) in disArr" :key="index" :style="item"></view>
            <view class="kedu">
                <view class="kedu-line" v-for="num in 24" :key="num"></view>
            </view>
        </view>
        <view class="nums">
            <view class="num" v-for="num in nums" :key="num">{{num}}</view>
        </view>
        <view class="tip">
            <view class="tip-block">
                <view class="tip-color" :style="{backgroundColor: leftColor}"></view>
                <view class="tip-text">已预定时段</view>
            </view>
            <view class="tip-block">
                <view class="tip-color" :style="{backgroundColor: lineColor}"></view>
                <view class="tip-text">可预定时段</view>
            </view>
            <view class="tip-text" style="margin-left: 20rpx; color: #FF6B6B;">至少预约{{minHours}}小时起</view>
        </view>
    </view>
</template>

<script>
export default {
    name: "time-slot",
    props: {
        leftColor: {
            type: String,
            default: 'rgba(100, 194, 149, 1)'
        },
        lineColor: {
            type: String,
            default: 'rgba(238, 238, 238, 1)'
        },
        canColor: {
            type: String,
            default: 'rgba(238, 238, 238, 1)'
        },
        meetingId: {
            type: String,
            default: null
        },
        minHours: {
            type: String,
            default: "1"
        },
        currentDay: {
            type: String,
            default: ''
        },
        beginTimeKey: {
            type: String,
            default: 'begin_time'
        },
        endTimeKey: {
            type: String,
            default: 'end_time'
        },
        disTimeArr: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            nums: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24],
            systemInfo: uni.getSystemInfoSync()
        };
    },
    computed: {
        isIOS() {
            return this.systemInfo.platform === 'ios';
        },
        dayWidth() {
            return this.systemInfo.windowWidth - 40;
        },
        curDay() {
            return this.currentDay || this.getCurrentDay();
        },
        disArr() {
            const zeroTime = this.getUnixTime(this.curDay + ' 00:00:00');
            const daySeconds = 86400;
            let totalWidthPercent = 0;
            const arr = this.disTimeArr.map(e => {
                const beginUnix = this.getUnixTime(e[this.beginTimeKey]);
                const endUnix = this.getUnixTime(e[this.endTimeKey]);
                if (beginUnix <= 0 || endUnix <= 0 || beginUnix >= endUnix) {
                    console.warn('Invalid time range:', e);
                    return { left: '0%', width: '0%', backgroundColor: 'transparent' };
                }
                const leftWidth = ((beginUnix - zeroTime) / daySeconds * 100);
                const width = ((endUnix - beginUnix) / daySeconds * 100);
                totalWidthPercent += width;
                return {
                    left: `${leftWidth.toFixed(2)}%`,
                    width: `${width.toFixed(2)}%`,
                    backgroundColor: this.leftColor
                };
            });
            if (totalWidthPercent > 100) {
                const ratio = 100 / totalWidthPercent;
                return arr.map(item => {
                    return {
                        left: item.left,
                        width: `${(parseFloat(item.width) * ratio).toFixed(2)}%`,
                        backgroundColor: item.backgroundColor
                    };
                });
            }
            return arr;
        },
        leftTimeStyle() {
            const now = Math.floor(Date.now() / 1000);
            const zeroTime = this.getUnixTime(this.curDay + ' 00:00:00');
            const daySeconds = 86400;
            const diff = Math.max(0, Math.min(daySeconds, now - zeroTime));
            const widthPercent = Math.min(100, ((diff / daySeconds) * 100));
            return {
                left: '0%',
                width: `${widthPercent.toFixed(2)}%`,
                backgroundColor: this.canColor
            };
        }
    },
    methods: {
        getUnixTime(dateStr) {
            if (!dateStr) return 0;
            let timestamp = 0;
            try {
                const date1 = new Date(dateStr.replace(/-/g, '/'));
                timestamp = date1.getTime();
                if (!isNaN(timestamp)) return Math.floor(timestamp / 1000);
            } catch (e) { }
            try {
                const date2 = new Date(dateStr.replace(' ', 'T') + 'Z');
                timestamp = date2.getTime();
                if (!isNaN(timestamp)) return Math.floor(timestamp / 1000);
            } catch (e) { }
            console.error('Failed to parse date:', dateStr);
            return 0;
        },
        getCurrentDay() {
            const date = new Date();
            return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
        }
    }
};
</script>

<style scoped>
.time-slot-wrapper {
    /* width: 96vw; */
    margin: 0 auto;
    padding: 2vw;
    box-sizing: border-box;
}

.all {
    position: relative;
    width: 100%;
    height: 3.5vw;
    border-radius: 1.75vw;
    overflow: hidden;
    background-color: #f5f5f5;
}

.line {
    position: absolute;
    height: 100%;
    top: 0;
    border-radius: 1.75vw;
    z-index: 3;
}

.leftLine {
    position: absolute;
    height: 100%;
    top: 0;
    border-radius: 1.75vw 0 0 1.75vw;
    z-index: 2;
}

.kedu {
    display: flex;
    position: absolute;
    align-items: flex-end;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 4;
}

.kedu-line {
    width: calc(100% / 24);
    height: 0.7vw;
    border-right: 1rpx solid rgba(255, 255, 255, 0.7);
    box-sizing: border-box;
}

.kedu-line:nth-child(2n) {
    height: 1.4vw;
}

.nums {
    width: 100%;
    display: flex;
    margin-top: 0.7vw;
}

.num {
    width: calc(100% / 13);
    font-size: 2.1vw;
    text-align: center;
    color: #999;
}

.tip {
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.4vw;
}

.tip-block {
    display: flex;
    align-items: center;
    margin-right: 4vw;
    margin-bottom: 0.7vw;
}

.tip-color {
    width: 2.1vw;
    height: 0.7vw;
    border-radius: 0.35vw;
}

.tip-text {
    margin-left: 1.2vw;
    font-size: 24rpx;
    color: #666;
}
</style>